import Paper from "@mui/material/Paper";
import { Setting } from "Iconlibs/user";
import SettingsIcon from "@mui/icons-material/Settings";
import DarkModeIcon from "@mui/icons-material/DarkMode";
import CategoryIcon from "@mui/icons-material/Category";
import BookmarkRemoveIcon from "@mui/icons-material/BookmarkRemove";
import BorderColorIcon from "@mui/icons-material/BorderColor";
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";

import CollectionsBookmarkIcon from "@mui/icons-material/CollectionsBookmark";
import TranslateIcon from "@mui/icons-material/Translate";
import styled from "styled-components";

const OperateWrapper = styled.ul`
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  > li {
    padding: 10px 0;
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 25%;

    > span {
      margin-top: 4px;
      font-size: 12px;
      color: #333;
    }
    > svg {
      width: 27px;
      height: 27px;
    }
  }
`;
export default function Operator() {
  return (
    <Paper elevation={0} sx={{marginBottom:"20px"}}>
      <OperateWrapper>
        <li>
          <SettingsIcon />
          <span>设置</span>
        </li>
        <li>
          <DarkModeIcon />
          <span>主题</span>
        </li>
        <li>
          <BookmarkRemoveIcon />
          <span>账本管理</span>
        </li>
        <li>
          <CategoryIcon />
          <span>分类管理</span>
        </li>
        <li>
          <BorderColorIcon />
          <span>自动记账</span>
        </li>
        <li>
          <CalendarTodayIcon />
          <span>周期记账</span>
        </li>
        <li>
          <CollectionsBookmarkIcon />
          <span>标签管理</span>
        </li>
        <li>
          <TranslateIcon />
          <span>分类关键词</span>
        </li>
      </OperateWrapper>
    </Paper>
  );
}
